<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="StyleSheet" th:href="@{/css/login/userInfo.css}" type="text/css" media="screen"/>
    <link rel='stylesheet' th:href="@{/css/component.css}" type="text/css" media="screen"/>
    <link rel='stylesheet' th:href="@{/css/components.css}" type="text/css" media="screen"/>


    <link rel="stylesheet" href="./style.css">
    <title>Register!</title>

</head>

<body>
<div class="box">
    <div class="parent">
        <div class="child1">
            <div id="backLink">
                <a th:href="@{/catalog/main}" ><img class="backImg" th:src="@{/images/back.png}"></a>
            </div>
            <div class="pic">

        <img  th:src="@{/images/login/phonecat2.gif}">
            </div>
        </div>
        <div class="child2">
    <form action="/account/register" method="post" id="newAccountForm" th:object="${account}">

  <div class="userInfo">


        <table>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <h3 class="title">TO BE A MEMBER!</h3>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr>
                <td class="td"><font color='red'>*</font>User ID:</td>
                <td><input type="text" name="username" id="username" th:field="*{username}" required autofocus/>
                    <div id="isUsername"></div>
                </td>
            </tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr>
                <td class="td"><font color='red'>*</font>New password:</td>
                <td><input type="password" name="password" id="password" th:field="*{password}" required/>
                    <div id="isPwd"></div></td>
            </tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr>
                <td class="td"><font color='red'>*</font>Repeat password:</td>
                <td><input type="password" name="repeatedPassword" id="repeatedPassword"/>
                    <div id="isRePwd"></div></td>
            </tr>
            <!--<tr>
                <td><font color='red'>*</font>Verification Code:</td>
                <td><input type="text" name="verificationCode" />
                    <div id="isVerify"></div></td>
                <td><a href="account?pre=register"><img id="img" src="verifyCode"  alt=""></a></td>
            </tr>-->
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr><td></td></tr>

            <tr><td class="more">More Information &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp       ↓↓↓↓</td></tr>
        </table>


        <div th:replace="account/userInfo"></div>

        <div class="btn">
        <input class="btn1" type="submit" name="newAccount" th:value="Register"/>

        </div>
  </div>

    </form>
</div>
    </div>
</div>
</div>
<script th:src="@{/js/checkAccount.js}"></script>
</div>
</body>
</html>